<template>
  <div class="ht-container" v-loading="state.loading">
    <HtHeader :data="breadData"> </HtHeader>
    <HtSearch
      @handelVisible="handelVisible"
      placeholder="搜索    合酒单号"
      @reset="reset"
      :showFilter="true"
      @search="search"
    >
      <template slot="center">
        <el-col :span="4">
          <el-form-item label="移出厂区">
            <SelectOrgUser
              v-model="state.filter.applyer"
              @change="handleSearch"
              :clearable="true"
            ></SelectOrgUser>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="移入厂区">
            <SelectOrgUser
              v-model="state.filter.applyer"
              @change="handleSearch"
              :clearable="true"
            ></SelectOrgUser>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="移出酒库">
            <SelectWine
              :dataTypeId="'positions'"
              v-model="state.filter.wineBreedCode"
              @change="handleSearch"
              :clearable="true"
            ></SelectWine>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="移入酒库">
            <SelectWine
              :dataTypeId="'positions'"
              v-model="state.filter.wineBreedCode"
              @change="handleSearch"
              :clearable="true"
            ></SelectWine>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="移出容器">
            <asset-select-assets-plus style="width: 100%">
              <div
                style="
                  height: 32px;
                  border: 1px solid #cfdade;
                  box-sizing: border-box;
                  padding: 0 13px;    line-height: 32px;    margin-top: 5px;
                "
              >
                {{ state.filter.outSapCode }}
              </div>
            </asset-select-assets-plus>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="移入容器">
            <asset-select-assets-plus style="width: 100%">
              <div
                style="
                  height: 32px;
                  border: 1px solid #cfdade;
                  box-sizing: border-box;
                  padding: 0 13px;    line-height: 32px;    margin-top: 5px;
                "
              >
                {{ state.filter.inSapCode }}
              </div>
            </asset-select-assets-plus>
          </el-form-item>
        </el-col>
      </template>
      <template slot="footer">
        <el-col :span="4">
          <el-form-item label="移出酒品">
            <SelectWine
              :dataTypeId="'positions'"
              v-model="state.filter.inSapCode"
              @change="handleSearch"
              :clearable="true"
            ></SelectWine>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="移入酒品">
            <SelectWine
              :dataTypeId="'positions'"
              v-model="state.filter.inSapCode"
              @change="handleSearch"
              :clearable="true"
            ></SelectWine>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合酒日期">
            <SelectTimeRange
              :pickerOptions="{
                disabledDate(time) {
                  return time.getTime() > Date.now();
                },
              }"
              v-model="state.filter.timeArr"
              style="width: 100%; margin-top: 4px"
              @change="handleSearch"
              :clearable="true"
            ></SelectTimeRange>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="收酒班组">
            <SelectOrg
              v-model="state.filter.workGroup"
              @change="handleSearch"
              :clearable="true"
            ></SelectOrg>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="合酒状态">
            <!-- <el-select
              v-model="state.filter.status"
              :clearable="true"
              @change="handleSearch"
              style="width:100%"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in statusFilter"
                :key="index"
                :label="item.des"
                :value="item.value"
              >
              </el-option>
            </el-select> -->

            <SelectStatusEnum
              v-model="state.filter.status"
              enumStatus="MixWineStatusEnum"
              :clearable="true"
              @change="handleSearch"
              style="width:100%"
            ></SelectStatusEnum>
          </el-form-item>
        </el-col>
      </template>
    </HtSearch>

    <el-card class="ht-card" style="margin-top: 16px">
      <ht-table
        class="ht-table-no-border"
        :data="state.dataSource"
        @onchange="changePage"
        style="width: 100%; margin-top: 12px"
        border
        pageStyle="text-align:right"
        :height="`calc(100vh - 314px - ${state.searchHeight}px)`"
        highlight-current-row
        :page-info="{
          currentPage: state.filter.currentPage,
          pageSize: state.filter.maxResultCount,
          skipCount: state.filter.skipCount,
          totalCount: state.filter.totalCount,
        }"
        :columns="columns"
        :isExpand="true"
        @expand-change="expandChange"
        :expand-row-keys="state.expandKeys"
      >
        <div slot="expand" slot-scope="{ row, rowIndex }">
          <div>
            <ht-table
              :ref="`table_${rowIndex}`"
              :data="row.childDetail"
              style="width: 110%"
              border
              :stripe="false"
              :hide-order="true"
              :hide-page="true"
              highlight-current-row
              :columns="columns2"
            >
            </ht-table>
          </div>
        </div>

        <Temp slot="empty">
          <span slot="tips">暂无数据哦</span>
        </Temp>
        <template slot="status" slot-scope="{ row }">
          <Status :color="status(row.status).color">{{
            status(row.status).title
          }}</Status>
        </template>

        <template slot="handel" slot-scope="{ row }">
          <span class="cursor" @click="handDetail(row)">详情</span>
        </template>
      </ht-table></el-card
    >

    <!-- 移库详情 -->
    <ht-drawer
      class="ht-new-drawer"
      v-if="state.visible"
      v-model="state.visible"
      title="合酒详情"
      size="100%"
    >
      <!-- 详情 -->
      <Detail
        :factoryName="state.factoryName"
        :selectRow="state.selectRow"
      ></Detail>

      <div slot="foot">
        <!-- 提示 -->

        <el-button
          :loading="state.loading"
          style="margin: 0px 24px; "
          @click="state.visible = false"
          >取消</el-button
        >
      </div>
    </ht-drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import HtSearch from './HtSearch.vue';
import SelectOrgUser from '@/components/selectOrgUser.vue';
import SelectOrg from '@/components/selectOrg.vue';
import Temp from '@/components/temp.vue';
import Status from '@/components/status.vue';
import Detail from './detail.vue';
import HtHeader from '@/components/htHeader.vue';
import SelectStatusEnum from '@/components/selectStatusEnum.vue';
import SelectTimeRange from '@/components/selectTimeRange.vue';
import { BreadType, Column, PageType } from 'htui-yllkbz/src/packages/type';
import {
  EnumDes,
  MixWineOrderApi,
  MixWineOrderDto,
  MixWineStatusEnum,
} from '@/plugins/api';
import { _axios } from 'vue-kst-auth';
import SelectWine from '@/components/selectWine.vue';
interface State {
  /** 数据状态 */
  loading: boolean;
  searchHeight: number;
  filter: {
    key: string | undefined;
    factoryName: string | undefined;
    workGroup: string | undefined;
    applyer: string | undefined;
    inSapCode: string | undefined;
    confirmWorkGroup: string | undefined;
    confirmer: string | undefined;
    status: undefined;
    creationTimeBegin: string | undefined;
    creationTimeEnd: string | undefined;

    timeArr: any;

    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
  };
  dataSource: any;
  /** 批量选中的数据 */
  selectRow: any;
  selectRows: any[];
  visible: boolean;
  visible1: boolean;
  visible2: boolean;
  active: number;
  activeName: string;
  backTrackingData: any;

  factoryName: any;
}
@Component({
  components: {
    HtHeader,
    HtSearch,
    SelectTimeRange,
    Detail,
    Temp,
    SelectWine,
    Status,
    SelectOrgUser,
    SelectOrg,
    SelectStatusEnum,
  },
})
export default class Index extends Vue {
  MixWineOrderApi = new MixWineOrderApi('/alcohol-management', _axios);

  /** 数据 */
  /** 数据 */
  state: State = {
    loading: false,
    searchHeight: 84,
    filter: {
      key: undefined,
      factoryName: undefined,
      workGroup: undefined,
      applyer: undefined,
      inSapCode: undefined,
      confirmWorkGroup: undefined,
      confirmer: undefined,
      status: undefined,

      creationTimeBegin: undefined,
      creationTimeEnd: undefined,
      timeArr: [],

      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
    },
    dataSource: [],
    /** 批量选中的数据 */
    selectRow: {},
    selectRows: [],
    visible: false,
    visible1: false,
    visible2: false,
    active: 0,
    activeName: 'second',
    backTrackingData: {},

    // 1代表合酒-古井、产业园，2代表合酒-张集
    factoryName: 2,
  };
  /** 生命周期 */

  /**展开预警 */
  expandChange(row: any, dataArray: any[]) {
    if (dataArray.indexOf(row) !== -1) {
      //expand 展开
      this.expandShow(row);
      // this.state.disabled = true;
    } else {
      //expand  关闭
      // this.state.expandKeys = [];
      // this.state.disabled = false;
    }
  }

  expandShow(row: any) {
    console.log(row, 'row');
    const _index = this.state.dataSource.findIndex(
      (item: any) => item.id == row.id
    );

    this.MixWineOrderApi.getById2(row.id)
      .then((res: any) => {
        console.log(res, 'red');
        row.containers = res.containers;
        row.containers.forEach((element: any) => {
          element.mixWineBreedSapName = res.mixWineBreedSapName;
          element.mixWineBreedSapCode = res.mixWineBreedSapCode;
        });

        this.$set(this.state.dataSource[_index], 'childDetail', row.containers);
        this.$forceUpdate();
      })
      .finally(() => {
        this.state.loading = false;
      });
  }
  /** 方法 */
  /** 搜索框 */
  handelVisible(height: number) {
    this.state.searchHeight = height;
  }
  /** 重置 */
  reset() {
    const { filter } = this.state;
    (filter.key = undefined),
      (filter.workGroup = undefined),
      (filter.applyer = undefined),
      (filter.inSapCode = undefined),
      (filter.confirmWorkGroup = undefined),
      (filter.confirmer = undefined),
      (filter.status = undefined),
      (filter.timeArr = []);

    // filter.filterText = "";

    // filter.isEnabled = undefined;
    this.handleSearch();
  }
  /** 搜索的回调 */
  search(data: any) {
    this.state.filter.key = data.keys;

    this.handleSearch();
  }
  // 点击进入详情
  handDetail(val: any) {
    this.state.visible = true;
    this.state.selectRow = val;
  }

  handleSearch() {
    this.state.filter.skipCount = 0;
    this.state.filter.currentPage = 1;
    if (this.state.filter.timeArr?.length) {
      this.state.filter.creationTimeBegin = this.state.filter.timeArr[0];
      this.state.filter.creationTimeEnd = this.state.filter.timeArr[1];
    } else {
      this.state.filter.creationTimeBegin = '';
      this.state.filter.creationTimeEnd = '';
    }

    this.getDataSource();
  }
  changePage(data: PageType) {
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource();
  }
  getDataSource() {
    this.state.loading = true;
    const { filter } = this.state;
    this.MixWineOrderApi.getList4(
      filter.key,
      filter.factoryName,
      filter.status,
      filter.creationTimeBegin,
      filter.creationTimeEnd,

      filter.applyer,
      filter.confirmer,

      filter.inSapCode,
      filter.workGroup,
      filter.confirmWorkGroup,
      undefined,

      filter.skipCount,
      filter.maxResultCount
    )
      .then((res: any) => {
        this.state.dataSource = res.items || [];
        this.state.filter.totalCount = res.totalCount || 0;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }

  //获取和酒状态
  status(val: number) {
    const arr = [
      { title: '待确认合酒', key: 0, color: '#E2B236' },
      { title: '待扫码开始', key: 1, color: '#E2B236' },
      { title: '合酒执行中', key: 2, color: 'var(--primary)' },
      { title: '待扫码结束', key: 3, color: '#E2B236' },
      { title: '已完成合酒', key: 4, color: '#CACECB' },
    ];

    return arr.find((item: any) => item.key == val);
  }
  /** 监听 */

  @Watch('$route.params.factoryName', { immediate: true })
  changefactoryName(val: string) {
    this.state.factoryName = val;

    this.state.filter.factoryName =
      this.state.factoryName == 1 ? '古井,产业园' : '张集';

    this.getDataSource();
  }

  /** 计算属性 */
  get breadData(): BreadType[] {
    return [
      { key: 'k1', title: '库存业务管理' },
      {
        key: 'k2',
        title: this.state.factoryName == 1 ? '古井、产业园' : '合酒-张集',
      },
    ];
  }
  get columns(): Column[] {
    return [
      { key: 'orderNo', title: '合酒单号' },
      { key: 'workGroup', title: '申请班组' },
      //
      { key: 'applyer', title: '申请人' },

      { key: 'confirmWorkGroup', title: '确认班组' },
      { key: 'confirmer', title: '确认人' },

      { key: 'mixWineBreedSapName', title: '合酒酒品' },
      //
      { key: 'mixWineBreedSapCode', title: '酒品代码' },
      { key: 'jarLevelBegin', title: '液位期初值' },

      { key: 'jarLevelEnd', title: '液位期末值' },
      { key: 'levelValue', title: '液位发生值' },

      //

      { key: 'status', title: '合酒状态' },

      { key: 'handel', title: '操作' },
    ];
  }

  get columns2(): Column[] {
    return [
      //
      { key: 'containerTypeStr', title: '类型' },
      { key: 'factoryName', title: '厂区' },
      { key: 'wineWareHouse', title: '酒库' },
      { key: 'outSapName', title: '容器名称' },
      { key: 'outSapCode', title: '容器编号' },

      { key: 'mixWineBreedSapName', title: '合酒酒品' },
      //
      { key: 'mixWineBreedSapCode', title: '酒品代码' },
    ];
  }

  //状态过滤，不同厂区，不同状态

  get statusFilter() {
    // 张集
    const zjStatus = [
      {
        key: 'WaitMergeWine',
        des: '待确认合酒',
        value: 0,
      },
      {
        key: 'WaitScanStart',
        des: '待扫码开始',
        value: 1,
      },
      {
        key: 'MergeWineing',
        des: '合酒执行中',
        value: 2,
      },
      {
        key: 'WaitScanCodeFinished',
        des: '待扫码结束',
        value: 3,
      },
      {
        key: 'MergeWineFinished',
        des: '已完成合酒',
        value: 4,
      },
    ];
    // 古井
    const gjStatus = [
      {
        key: 'WaitMergeWine',
        des: '待确认合酒',
        value: 0,
      },

      {
        key: 'MergeWineing',
        des: '合酒执行中',
        value: 2,
      },

      {
        key: 'MergeWineFinished',
        des: '已完成合酒',
        value: 4,
      },
    ];

    return this.state.factoryName == 1 ? gjStatus : zjStatus;
  }
}
</script>
<style lang="scss" scoped>
.cursor {
  color: var(--primary);
  cursor: pointer;
}
</style>
